<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
	<style>
		/*
		 
		 Step #7
		 	- 이미지 정보  출력하기.
		 
		 Step #6
		 	- Ajax을 이용해서 외부 데이터 연동처리하기.
		 
		 	Step #6-2
		 		- 동적으로 썸네일 목록 생성하기.
		 		
		 	Step #6-1
		 		- image_gallery.xml 파일 만들기.
		 		
		 Step #5
		 	- 이전, 다음 이미지 처리하기.
		 	
		 	Step #5-3
		 		- 이전,다음 이미지 활성화에 따른 페이지 처리하기.
		 		
		 	Step #5-2
		 		- 이전, 다음 이미지 활성화 시키기.
		 		
		 	Step #5-1. 
		 		- 네비게이션 활성화 시키기.
		 	
		 Step #4
		 	- 선택된 썸네일에 커서 이동시키기.
		 	
		  Step #3
		  	- 선택 이미지 활성화 시키기.
		  	
		  	
		  	Step #3-4
		  		- 이미지 로딩 취소처리하기.
		  		
		  		
		  	Step #3-3		  	
		  		- 핵심이슈 적용시키기.
		  		
		  	Step #3-2
		  		- 이미지 로딩 패널 보이기/ 숨기기.
		  		
		  	Step #3-1
		  		- 선택 이미지 로드하기.
		  		
		  		
		  Step #2
		 	- 페이징 처리하기.
		 	
		 	Step #2-3
		 		- 리팩토링.
		 		
		 	Step #2-2
		 		- 페이지 애니메이션 효과 구현.
		 		 
		 	Step #2-1
		 		- 페이지 정보 구하기.
		 		
		 Step #1		 
		 	- 레이아웃 잡기.
		 
		 */
	</style>
	<link rel="stylesheet" href="image_gallery.css" type="text/css">
	<script  type="text/javascript"  src="../libs/jquery-1.7.1.min.js"></script>
	<script  type="text/javascript"  src="../libs/jquery.easing.1.3.js"></script>
	<script  type="text/javascript"  src="image_gallery.js"></script>
</head>

<body>
	<div class="image_gallery">
		
		<div class="image_container">
			
			<div id="image_canvas">
				<!-- 테스트를 위해서 추가된 값입니다. -->
				<img src="../img/10.jpg" style="left:150px; height:100%">
			</div>
			
			<!-- 이미지 메뉴는 시작시 화면에 보이지 않습니다. --> 
			<div id="image_menu">
				<button id="prev_image">이전 이미지</button>
				<button id="next_image">다음 이미지</button>
			</div>
			
			<!-- 로딩 패널은 이미지가 로딩될때만 보이게 됩니다. -->
			<div id="loading_panel">				
				<img src="../images/loading.gif" >
			</div>
			
		</div>
		
		<div id="image_comment">
			이곳에 이미지 설명이 출력 됩니다.
		</div>
		
		<div class="page_container">
			<div class="thumb_container">
				<div id="thumb_list">
					
					<div id="thumb_cursor"></div>
					
					
				</div>
			</div>
		
			<div class="page_menu">
				<button id="prev_page">이전 페이지</button>
				<label id="page_info">page : 00/00</label>
				<button id="next_page">다음 페이지</button>
			</div>
		
		</div>
	
	</div>
		
</body>
</html>
